<template>
  <view
    v-if="openModal"
    class="wx-modal"
  >
    <view
      class="wam__mask"
      @touchmove.prevent=""
      @tap.stop="closeModal"
    ></view>
    
    <!-- 内容区域 -->
    <view class="wam__wrapper">
      <!-- 关闭按钮 -->
      <view class="wam__close-btn" @tap.stop="closeModal">
        <tn-button size="sm" shape="icon" backgroundColor="#FFFFFF20" fontColor="#FFFFFF">
          <text class="tn-icon-close"></text>
        </tn-button>
        <!-- <text class="tn-icon-close-fill tn-color-white"></text> -->
      </view>
      <view class="tn-margin-left tn-flex tn-flex-col-center tn-color-white">
        <view class="tn-icon-rabbit" style="font-size: 46rpx"></view>
        <view class="tn-padding-left-xs tn-text-bold">短剧 ~ 抓住那只北北猪</view>
        <view class="tag-vip tn-bg-orange--light tn-color-brown tn-text-center" style="font-size: 14rpx;">
          <text class="tn-icon-vip-diamond-fill"></text>
          <text class="tn-padding-left-xs">付费</text>
        </view>
      </view>
      
      <view class="tn-color-gray tn-text-xs tn-padding-left tn-padding-right" style="padding-top: 4rpx;">
        <text>129.8万 播放 · 86集全</text>
      </view>
      
      <view class="tn-margin-top-sm" style="border-top: 1rpx solid #FFFFFF10;">
        
        <scroll-view scroll-y="true" style="max-height: 60vh;">
          <!-- 集合 start-->
          <view class="">
            <block v-for="(item, index) in news" :key="index">
              <view class="tn-padding" :class="[item.select ? 'bg-select' : '']" @click="tn('/xx/xx')">
                <view class="tn-flex">
                  <view class="image-pic tn-margin-right-sm" style="background-image:url(https://img2.baidu.com/it/u=2296811182,2574579184&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=729)">
                  </view>
                  <view class="tn-margin-left-sm tn-margin-top-xs" style="width: 100%;">
                    <view class="clamp-text-2 tn-color-white tn-text-justify" style="min-height: 70rpx;">
                      <text class="">{{ item.title }}</text> 
                      <text class="tn-padding-left-xs tn-padding-right-xs" style="opacity: 0.5;">|</text>
                      <text class="">{{ item.desc }}</text>
                    </view>
                    <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-top-sm">
                      <view class="justify-content-item tn-color-gray tn-text-center" style="padding-top: 5rpx;">
                        <text class="tn-icon-time tn-padding-right-xs"></text>
                        <text class="tn-padding-right">{{ item.time }}</text>
                        <text class="tn-icon-like tn-padding-right-xs"></text>
                        <text class="">{{ item.likeCount }}</text>
                      </view>
                      <view class="justify-content-item tn-color-gray tn-text-bold">
                        <text class="tn-icon-video-fill"></text>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </block>
          </view>
          <!-- 集合 end-->
        
          <view class="tn-tabbar-height"></view>
        
        </scroll-view>
        
      </view>
      
    </view>
  </view>
</template>

<script>
  
  export default {
    options: {
      // 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
      virtualHost: true
    },
    props: {
      value: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        openModal: false,
        news: [{
            userAvatar: 'https://resource.tuniaokj.com/images/skit/video-1.jpeg',
            userName: '可我会像',
            date: '2022年5月20日',
            select: false,
            title: '第1集',
            desc: '我不喜欢带伞，不喜欢一个人，因为雨水从不滴落在我的心上 #抓住那只北北猪 #播兔短剧推荐',
            time: '02:26',
            commentCount: 543,
            likeCount: 206
          },
          {
            userAvatar: 'https://resource.tuniaokj.com/images/skit/video-1.jpeg',
            userName: '可我会像',
            date: '2022年5月20日',
            select: true,
            title: '第2集',
            desc: '你从银河背后靠近我，我与星辉一同为你沉沦 #抓住那只北北猪 #播兔短剧推荐',
            time: '01:59',
            commentCount: 69,
            likeCount: 65
          },
          {
            userAvatar: 'https://resource.tuniaokj.com/images/skit/video-1.jpeg',
            userName: '可我会像',
            date: '2022年5月20日',
            select: false,
            title: '第3集',
            desc: '生活需要一些仪式感，这跟矫情无关，有些记忆会被时间焚烧 #抓住那只北北猪 #播兔短剧推荐',
            time: '03:12',
            commentCount: 232,
            likeCount: 543
          },
          {
            userAvatar: 'https://resource.tuniaokj.com/images/skit/video-1.jpeg',
            userName: '可我会像',
            date: '2022年5月20日',
            select: false,
            title: '第4集',
            desc: '感谢你，带给我一年四季的陪伴与支持 #抓住那只北北猪 #播兔短剧推荐',
            time: '01:56',
            commentCount: 236,
            likeCount: 342
          },
          {
            userAvatar: 'https://resource.tuniaokj.com/images/skit/video-1.jpeg',
            userName: '可我会像',
            date: '2022年5月20日',
            select: false,
            title: '第5集',
            desc: '眼里有光，世界将为你亮起 #抓住那只北北猪 #播兔短剧推荐',
            time: '01:49',
            commentCount: 32,
            likeCount: 91
          },
          {
            userAvatar: 'https://resource.tuniaokj.com/images/skit/video-1.jpeg',
            userName: '可我会像',
            date: '2022年5月20日',
            select: false,
            title: '第6集',
            desc: '为什么我没能早点遇见你，没有你的世界，我真的好害怕 #抓住那只北北猪 #播兔短剧推荐',
            time: '01:56',
            commentCount: 48,
            likeCount: 86
          },
          {
            userAvatar: 'https://resource.tuniaokj.com/images/skit/video-1.jpeg',
            userName: '可我会像',
            date: '2022年5月20日',
            select: false,
            title: '第7集',
            desc: '你在哪里，明天就在哪里 #抓住那只北北猪 #播兔短剧推荐',
            time: '02:26',
            commentCount: 42,
            likeCount: 76
          },
          {
            userAvatar: 'https://resource.tuniaokj.com/images/skit/video-1.jpeg',
            userName: '可我会像',
            date: '2022年5月20日',
            select: false,
            title: '第8集',
            desc: '晚风轻踩着云朵，月亮在贩售快乐 #抓住那只北北猪 #播兔短剧推荐',
            time: '01:50',
            commentCount: 22,
            likeCount: 62
          }
        ],
        
      }
    },
    watch: {
      value: {
        handler(val) {
          this.openModal = val
        },
        immediate: true
      }
    },
    methods: {
      
      // 关闭弹框
      closeModal() {
        this.$emit('input', false)
      },
      
    }
  }
</script>

<style lang="scss" scoped>
  
  /* 文字截取*/
  .clamp-text-1 {
    -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  
  .clamp-text-2 {
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  
  
  .wx-modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99998 !important;
    
    view {
      box-sizing: border-box;
    }
    
    .image {
      width: 100%;
      height: 100%;
      border-radius: inherit;
    }
    
    .wam {
      z-index: 9999 !important;
      /* mask */
      &__mask {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.1);
        opacity: 0;
        animation: showMask 0.25s linear 0s forwards;
      }
      
      /* close-btn */
      &__close-btn {
        position: absolute;
        top: 40rpx;
        right: 30rpx;
        z-index: 99999;
        font-size: 40rpx;
      }
      
      /* wrapper */
      &__wrapper {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        background-color: #000000CC;
        border-radius: 40rpx 40rpx 0rpx 0rpx;
        padding-top: 40rpx;
        // padding-bottom: 40rpx;
        // padding-bottom: calc(constant(safe-area-inset-bottom) + 40rpx);
        // padding-bottom: calc(env(safe-area-inset-bottom) + 40rpx);
        transform-origin: center bottom;
        transform: scaleY(0);
        animation: showWrapper 0.25s linear 0s forwards;
        z-index: 99999;
      }
      
    }
  }
  
  @keyframes showMask {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes showWrapper {
    0% {
      transform: scaleY(0);
      opacity: 0;
    }
    100% {
      transform: scaleY(1);
      opacity: 1;
    }
  }
  
  .bg-select{
    background-color: #FFFFFF10;
  }
  
  /* 底部悬浮按钮 start*/
  .tn-tabbar-height {
  	min-height: 20rpx;
  	height: calc(40rpx + env(safe-area-inset-bottom) / 2);
    height: calc(40rpx + constant(safe-area-inset-bottom));
  }
  .tn-footerfixed {
    width: 100%;
    margin-top: 60rpx;
    margin-bottom: calc(env(safe-area-inset-bottom)- 20rpx );
    z-index: 1024;
    box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);
  
  }
  /* 底部悬浮按钮 end*/
  
  .image-pic {
    width: 170rpx;
    height: 150rpx;
    background-size: cover;
    background-repeat: no-repeat;
    // background-attachment:fixed;
    background-position: center;
    border-radius: 10rpx;
    border: 1rpx solid #FFFFFF10;
  }
  
  /* 标签 start*/
  .tag-vip {
    display: inline-block;
    padding: 6rpx 12rpx 6rpx;
    margin: 0 0 0 15rpx;
    border-radius: 10rpx;
    min-width: 80rpx;
  }
  
  /* 标签 end*/
  
</style>